<template>
  <div class="statistics-channel">
    <!--@btn-change="dateTypeChange"-->
    <!--@search="search"-->
    <df-search-title title="渠道概况"
                     :options="btns"
                     default-index="3"
                     @btn-change="search"
                     has-date-type></df-search-title>
    <div class="e-chart-box flex jcb mb20">
      <e-charts :loading="companyLoading" :options="companyObj" class="company bg flex-1 mr15 pb10"
                height="300px"></e-charts>
      <e-charts :loading="companyLoading" :options="achievementObj" class="achievement bg flex-1 pb10"
                height="300px"></e-charts>
    </div>
    <div class="table bg p20" v-loading="tableLoading">
      <div class="table-name">渠道列表</div>
      <gl-table :data="data" :columns="columns" @sort-change="sortChange"></gl-table>
      <gl-pagination :total="total" :curr="curr" :size="limits" @callback="paginationChange"></gl-pagination>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "StatisticsChannel",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        tableLoading: false,
        companyLoading: false,
        btns: ['本月', '上个月', '近半年', '1年'],
        company: [],
        achievement: [],
        companyObj: {},
        achievementObj: {},
        data: [],
        columns: [
          {label: '渠道ID', prop: 'channel_id'},
          {label: '渠道名称', prop: 'channel_name'},
          {label: '绑定客户数', prop: 'connect_customer_nums', format: val => this.tools.moneyNumber(val)},
          {label: '绑定产品', prop: 'connect_product_nums', format: val => this.tools.moneyNumber(val)},
          {label: '渠道总用户数', prop: 'customer_totals', format: val => this.tools.moneyNumber(val)},
          {label: '上月环比增长量', prop: 'last_month_user_growth', format: val => this.tools.moneyNumber(val)},
          {label: '上月同比增长量', prop: 'averge_user_growth', format: val => this.tools.moneyNumber(val, 2)},
        ],
        dateType: 4,
        total: 100,
        curr: 1,
        limits: 10,

        xAxis: [],
      }
    },
    watch: {
      company(val) {
        this.companyObj = {
          title: {
            text: '设备增长趋势',
            x: 'center',
            y: 10,
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: val.map(e => e.name),
            bottom: 10,
          },
          grid: {
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.xAxis,
          },
          yAxis: {
            type: 'value'
          },
          series: val,
        };
      },
      achievement(val) {
        this.achievementObj = {
          title: {
            text: '设备总量统计',
            x: 'center',
            y: 10,
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: val.map(e => e.name),
            bottom: 10,
          },
          grid: {
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.xAxis,
          },
          yAxis: {
            type: 'value'
          },
          series: val,
        };
      },
    },
    created() {
      this.getTable(1);
    },
    mounted() {
      this.getChart();
    },
    methods: {
      getChart() {
        this.companyLoading = true;
        this.http.$post('admin/channel.Api/new_channel_device_month_growth', {
          company_id: this.userInfo.company_id,
          customer_id: this.userInfo.customer_id,
          type: this.dateType === 3 ? 4 : this.dateType === 4 ? 3 : this.dateType,
        }).then(res => {
          let growth = [];
          let total = [];
          this.xAxis = [];
          res.map((item, i) => {
            let g = {
              name: item.channel_name,
              type: 'line',
              smooth: true,
              data: []
            };
            let t = {
              name: item.channel_name,
              type: 'bar',
              data: []
            };
            item.growth_and_time && item.growth_and_time.map(val => {
              !this.xAxis.includes(val.time) && this.xAxis.push(val.time);
              g.data.push(val.growth);
              t.data.push(val.total);
            });
            growth.push(g);
            total.push(t);
          });
          this.company = growth;
          this.achievement = total;
          this.companyLoading = false;
        }).catch(e => {
          this.companyLoading = false;
          console.log(e);
        });
      },

      getTable(init) {
        if (init) {
          this.curr = 1;
        }
        this.tableLoading = true;
        this.http.$post('admin/channel.Api/channel_lists', {
          // this.http.$post('admin/channel.Api/lists', {
          curr: this.curr,
          limits: this.limits,
          customer_id: this.userInfo.customer_id || 0,
          company_id: this.userInfo.company_id,
          type: this.dateType,
        }).then(table => {

          this.tableLoading = false;
          this.data = table.list;
          this.total = table.total;
        }).catch(e => {
          this.tableLoading = false;
          this.$err(e);
        });
      },
      search(val) {
        this.dateType = val + 1;
        this.getChart();
        this.getTable(1);
      },
      sortChange(column, prop, order) {
        console.log(column, prop, order);
      },
      paginationChange({curr, size}) {
        this.curr = curr;
        this.limits = size;
        this.getTable();
      }

    },
  }
</script>

<style scoped lang="less">
  .bg {
    background-color: #fff;
    border-radius: 5px;
  }

  .table-name {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
  }


</style>